<template>
  <div class="container">
    <div :id="id" style="width: 100%" :option="option"></div>
  </div>
</template>

<script>
import HighCharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(HighCharts)
export default {
    props: {
        id: {
            type: String
        },
        // option 是图表的配置数据
        option: {
            type: Object
        }
    },
    watch: {
        option: {
            handler() {
                this.initCharts()
            },

            deep: true // 对象内部属性的监听，关键。
        }
    },
    mounted() {
        this.initCharts()
    },
    methods: {
        initCharts() {
            HighCharts.chart(this.id, this.option)
        }

    }

}
</script>
